<template>
    <div class="body">
        <div class="canvas"
             :style="{width:canvas.base.width+'px',height:canvas.base.height+'px',background:canvas.base.background,backgroundImage:'url(\''+canvas.base.backgroundImage+'\')',position: 'relative'}">
            <component :is="item.name" :config="item.config" :data="data" :uuid="item.uuid"
                       v-for="(item,i) in canvas.data"
                       :style="{position:'absolute',top:item.top+'px',left:item.left+'px',width:item.width+'px',height: item.height+'px'}"></component>
        </div>
        <div id="excel" style="visibility:hidden"></div>
    </div>
</template>

<script>

    import {LuckySheet} from '../entity/LuckySheet';
    import {Canvas} from '../entity/Canvas';

    export default {
        name: 'Home',
        components: {},

        data() {
            var that = this;

            return {
                canvas: {
                    base: {
                        width: 0,
                        height: 0,
                        background: '#fff',
                        backgroundImage: '',
                        name: ''
                    }
                    ,
                    data: []
                },
                data: 0,// 数据变动计数器
                options: {
                    showinfobar: false,
                    lang: "zh",
                    container: 'excel', //luckysheet为容器id
                    data: [
                        {
                            "name": "Cell", //工作表名称
                            "color": "", //工作表颜色
                            "index": 0, //工作表索引
                            "status": 1, //激活状态
                            "order": 0, //工作表的下标
                            "hide": 0,//是否隐藏
                            "row": 36, //行数
                            "column": 18, //列数
                            "defaultRowHeight": 19, //自定义行高
                            "defaultColWidth": 73, //自定义列宽
                            "celldata": [{
                                "r": 0,
                                "c": 0,
                                "v": {
                                    ct: {fa: "General", t: "g"},
                                    m: "value1",
                                    v: "value1"
                                }
                            }], //初始化使用的单元格数据
                            "config": {
                                "merge": {}, //合并单元格
                                "rowlen": {}, //表格行高
                                "columnlen": {}, //表格列宽
                                "rowhidden": {}, //隐藏行
                                "colhidden": {}, //隐藏列
                                "borderInfo": {}, //边框
                                "authority": {}, //工作表保护

                            },
                            "scrollLeft": 0, //左右滚动条位置
                            "scrollTop": 315, //上下滚动条位置
                            "luckysheet_select_save": [], //选中的区域
                            "calcChain": [],//公式链
                            "isPivotTable": false,//是否数据透视表
                            "pivotTable": {},//数据透视表设置
                            "filter_select": {},//筛选范围
                            "filter": null,//筛选配置
                            "luckysheet_alternateformat_save": [], //交替颜色
                            "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
                            "luckysheet_conditionformat_save": {},//条件格式
                            "frozen": {}, //冻结行列配置
                            "chart": [], //图表配置
                            "zoomRatio": 1, // 缩放比例
                            "image": [], //图片
                            "showGridLines": 1, //是否显示网格线
                            "dataVerification": {} //数据验证配置
                        },
                        {
                            "name": "Sheet2",
                            "color": "",
                            "index": 1,
                            "status": 0,
                            "order": 1,
                            "celldata": [],
                            "config": {}
                        },
                        {
                            "name": "Sheet3",
                            "color": "",
                            "index": 2,
                            "status": 0,
                            "order": 2,
                            "celldata": [],
                            "config": {},
                        }
                    ],
                    hook: {
                        updated: function () {
                            // 数据变化时候驱动
                            that.data++;
                        },
                        workbookCreateAfter: function () {
                            // 文档结束后渲染画布
                            // let canvas = new Canvas();
                            that.canvas = JSON.parse(window.localStorage.getItem('canvas')).data
                        }
                    }
                },
                luckysheet: null,
            }
        },

        methods: {},
        mounted() {
            // 初始化画布
            // 获取数据
            var that = this;
            if (window.localStorage.getItem('excel') != undefined) {
                this.options = JSON.parse(window.localStorage.getItem('excel')).data;
                // 添加hook函数
                this.options.hook = {
                    updated: () => {
                        // 数据变化时候驱动
                        this.data++;
                    },
                    workbookCreateAfter: function () {
                        // 文档结束后渲染画布
                        // let canvas = new Canvas();
                        // 禁止初始化，初始化后会不停的保存

                        that.canvas = JSON.parse(window.localStorage.getItem('canvas')).data;
                    }
                }
            }
            new LuckySheet("excel", this.options);

            setInterval(function () {
                    // 500ms 更新，新增的组件
                    let canvas = JSON.parse(window.localStorage.getItem('canvas')).data;
                    // 比较和上次的差别，没有差别不加载组件
                    if (JSON.stringify(canvas) != JSON.stringify(that.canvas)) {
                        const component = new Set();
                        let item;
                        for (item of canvas.data) {
                            let canvas = new Canvas().getLocalCanvas();
                            // 节流处理，cpu负担太大了
                            //比较两个对象是否相同
                            const component = new Set();
                            let item;
                            for (item of canvas.data) {
                                component.add(item.name);
                            }
                            const componentArr = [...component];
                            let componentUrl = [];
                            for (const el of componentArr) {
                                for (item of init) {
                                    if (item.name == el) {
                                        componentUrl.push(item.src);
                                    }
                                }
                            }
                        }


                        // 更新excel 数据
                        let options = JSON.parse(window.localStorage.getItem('excel')).data;
                        // 比较数据是否有差别
                        if (JSON.stringify(options) != JSON.stringify(that.options)) {
                            that.options = options;

                            // 更新数据
                            that.data++;
                            // 添加hook函数
                            that.options.hook = {
                                updated: () => {
                                    // 数据变化时候驱动
                                    that.data++;
                                },
                                workbookCreateAfter: function () {
                                    // 文档结束后渲染画布
                                    // let canvas = new Canvas();
                                    // 重新渲染视图
                                    // 禁止初始化，初始化后会不停的保存
                                    that.canvas = JSON.parse(window.localStorage.getItem('canvas')).data;
                                    ;
                                }
                            }

                            new LuckySheet("excel", that.options);
                        }
                    }
                }, 500
            );
        },
        watch: {}
    }
</script>
<style lang="scss" scoped>
    .canvas {
        position: absolute;
    }

    .body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
